<template>
  <view>
    <cu-custom bgColor="bg-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">服务登记</block>
    </cu-custom>
    <view class="padding-sm">
      <view class="radius shadow padding-sm shadow-lg bg-white det_top">
        <view style="margin-right: 30rpx">
          <view
            class="current-item-img-outer"
            style="width: 200rpx"
            v-if="
              item.serviceItemIcon.mode == 'local' ||
              item.serviceItemIcon.mode == 'sysIcon'
            "
          >
            <view class="current-item-img">
              <image :src="item.serviceItemIcon.picUrl" mode=""></image>
            </view>
          </view>
          <view
            class="current-item-img-outer current-item-img-outer-img"
            style="width: 120rpx; height: 80rpx"
            v-if="item.serviceItemIcon.mode == 'diy'"
            :style="{
              color: item.serviceItemIcon.fontColor,
              background: item.serviceItemIcon.bacColor,
            }"
          >
            <view>{{ item.serviceItemIcon.word }}</view>
          </view>
          <view style="text-align: center; margin-top: 10rpx">{{
            item.serviceItemName
          }}</view>
        </view>
        <view class="detail-right detail-inner">
          <view>待服务对象</view>
          <view class="detail-content">
            {{ item.needServiceNum }}
          </view>
        </view>
      </view>
    </view>
    <view style="display: flex">
      <view class="scroll">
        <scroll-view scroll-y="true">
          <view
            :class="{ changeColor: tabIndex == index }"
            @click="changeTabs(index, item)"
            class="scroll_inner"
            v-for="(item, index) in leftList"
            :key="index"
          >
            <view>{{ item.name }}</view>
          </view>
        </scroll-view>
      </view>
      <view class="scroll_rig" v-if="serviceTarget == 1">
        <view class="scroll_rig" style="height: 70vh">
          <scroll-view scroll-y="true" style="height: 70vh">
            <view
              v-for="(item, index) in rightList"
              :key="index"
              class="scroll_rig_inner"
              @click="gotodeatils(item)"
            >
              <view class="person_img">
                <image
                  src="../../../static/img/basics/u609.png"
                  mode=""
                ></image>
              </view>
              <view class="person_rig">
                <view class="person_tp">
                  <view>
                    {{ item.roomName }}
                  </view>
                  <view class="person_bt" style="flex-direction: column">
                    <view>
                      <text class="right">昨日累计:</text>
                      <text>{{ item.yesterdayCheckCount }}次</text>
                    </view>
                    <view>
                      <text class="right">本月累计:</text>
                      <text>{{ item.curMonthCheckCount }}次</text>
                    </view>
                  </view>
                </view>
                <!-- <view class="person_icon">
										<text class="lg text-gray cuIcon-right" ></text> 
									</view> -->
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabindex: 0,
      shit: false,
      value: true,
      isUseo: true,
      isUset: false,
      serviceTarget: "",
      fsfzList: [
        {
          name: "三交枕",
          checked: true,
        },
        {
          name: "腰枕",
          checked: false,
        },
        {
          name: "皮肤异常",
          checked: false,
        },
      ],
      fszsList: [
        {
          name: "左侧",
          checked: false,
        },
        {
          name: "右侧",
          checked: false,
        },
        {
          name: "平卧",
          checked: false,
        },
      ],
      tabIndex: 0,
      roomList: [],
      showNull: false,
      item: {},
      modalName: "",
      customItem: [],
      leftList: [], //左侧
      rightList: [], //右侧
      serviceCycle: "",
      pageItem: {}, //本业调用接口，
      showItem: {},
      timeRange: "",
      serviceObject: {},
      //展示
    };
  },
  onShow() {},
  onLoad(options) {
    this.serviceCycle = options.serviceCycle;
    this.item = JSON.parse(options.item);
    this.item.recordRemark = "";
    this.item.teamId = uni.getStorageSync("teamId");
    this.serviceTarget = this.item.serviceTarget;
    this.getObjectLeftListByServiceItem();
    const that = this;
    uni.$on("NFC_READ", function (msg) {
      that.readCard(msg.rfid);
    });
  },
  onUnload() {
    // 移除监听事件
    uni.$off("NFC_READ");
  },
  
  onHide() {},
  methods: {
    readCard(id) {
      // ?serviceCycle=1&serviceItemId=202011130000011&teamId=202010280000001&rfidCardId=791aecf6
      let param = {
        serviceCycle: this.serviceCycle,
        serviceItemId: this.item.id,
        teamId: uni.getStorageSync("teamId"),
        rfidCardId: id,
      };
      this.$http(
        "/care-service/service/getByRfidCardIdForService",
        "get",
        param
      ).then((res) => {
        if (res.data.code == 200) {
          console.log(res, 9999);
          if (res.data.data.serviceTarget == "1") {
            this.serviceObject = res.data.data.serviceObject;
            let _that = this;
            setTimeout(function () {
              uni.navigateTo({
                url:
                  "/pages/basics/daily/registration?roomName=" +
                  _that.serviceObject.name +
                  "&roomId=" +
                  _that.serviceObject.id,
              });
            }, 1000);
          }
        }
      });
    },
	gotodeatils(item){
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak('房间名称'+item.roomName+'昨日累计'+item.yesterdayCheckCount+'本月累计'+item.curMonthCheckCount,1);
		}	
	},
    // GET //getObjectLeftListByServiceItem
    // 获取待服务对象左侧列表(传serviceCycle,teamId,'serviceItemId'
    getObjectLeftListByServiceItem() {
      let param = {};
      param.serviceCycle = this.serviceCycle;
      param.teamId = uni.getStorageSync("teamId");
      param.serviceItemId = this.item.id;
      this.$http(
        "/care-service/service/getObjectLeftListByServiceItem",
        "get",
        param
      ).then((res) => {
        if (res.data.code == 200) {
          this.getObjectRightListByServiceItem(res.data.data[0].id);
          this.leftList = res.data.data;
          this.serviceTarget = this.leftList[0].serviceTarget;
        }
      });
    },
    changeValue() {
      this.value = !this.value;
      if (!this.value) {
        this.item.useItem = "";
        this.item.useNum = "";
      }
    },
    // GET /service/getObjectRightListByServiceItem
    // 获取待服务对象右侧列表(传serviceCycle,teamId,'serviceItemId',preId)
    getObjectRightListByServiceItem(preId) {
      let param = {};
      param.serviceCycle = this.serviceCycle;
      param.teamId = uni.getStorageSync("teamId");
      param.serviceItemId = this.item.id;
      param.preId = preId;
      this.$http(
        "/care-service/service/getObjectRightListByServiceItem",
        "get",
        param
      ).then((res) => {
        if (res.data.code == 200) {
          this.rightList = res.data.data;
          // this.getObjectRightListByServiceItem[this.leftList[0].id]
        }
      });
    },
    changeTabs(index, item) {
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak(item.name,1);
		}
      this.serviceTarget = this.item.serviceTarget;
      this.tabIndex = index;
      this.getObjectRightListByServiceItem(item.id);
    },
  },
};
</script>

<style scoped lang="scss">
page {
  background-color: #ffffff;
}
.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}

.detail {
  display: flex;
  align-items: center;
  .detail-img {
    width: 100rpx;
    height: 100rpx;
    margin-right: 70rpx;
  }
  font-size: 34rpx;
  color: #333333;
}

.service {
  padding: 20rpx;
  display: flex;
  .left {
    flex: 1;
    margin-right: 20rpx;
    text-align: center;
  }
  .right {
    flex: 3;
  }
}
.goods {
  display: flex;
}
.goods {
  .left {
    width: 200rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    padding: 0 20rpx;
    background-color: #f2f2f2;
    margin: 0 30rpx;
    border-radius: 15rpx;
  }
  .right {
    width: 70rpx;
    height: 30rpx;
    border-radius: 15rpx;
    line-height: 30rpx;
    padding: 0 20rpx;
    text-align: center;
    background-color: #f2f2f2;
    margin-right: 12rpx;
  }
}
.assist {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
    text-align: left;
  }
}
.trun-position {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
    text-align: left;
  }
}
.dengji {
  font-size: 34rpx;
  margin-bottom: 12rpx;
}
.notes_outer {
  display: flex;
  align-items: center;
  .left {
    margin-right: 30rpx;
  }
  .notes {
    border: 2rpx solid #aaaaaa;
    height: 70rpx;
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    input {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10rpx;
      line-height: 70rpx;
    }
  }
}

.det_top {
  font-size: 34rpx;
  .detail-content {
    margin-top: 30rpx;
  }
  display: flex;
  .detail-inner {
    flex: 1;
  }
  .detail-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .detail-img {
      width: 70rpx;
      height: 70rpx;
    }
  }
  .detail-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1rpx solid #aaaaaa;
  }
}

.tab-outer {
  box-sizing: border-box;
  padding-bottom: 30rpx;
  display: flex;
  height: 110rpx;
  align-items: center;
  background-color: #ffffff;
  .position {
    display: flex;
    justify-content: flex-end;
    margin-right: 30rpx;
  }
  .tab {
    flex: 1;
    height: 100%;
    font-size: 32rpx;
    .tab-item {
      width: 40%;
      display: flex;
      justify-content: center;
      height: 100%;
      align-items: center;
      border-bottom: 10rpx solid #ffffff;
    }
    .tabchange {
      color: #faad14;
      border-bottom: 10rpx solid #faad14;
      font-weight: 700;
    }
  }
}
.current-item-img-outer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

page {
  background-color: #ffffff;
}
.scroll_inner {
  width: 200rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scroll {
  background-color: #f2f2f2;
  height: 70vh;
}
.changeColor {
  background-color: #ffffff;
}
.scroll_rig {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 20rpx;
  height: 160rpx;
  width: 100%;
  .person_img {
    image {
      width: 120rpx;
      height: 120rpx;
    }
  }
  .person_rig {
    margin-left: 20rpx;
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #dddddd;
  }
  .person_bt {
    display: flex;

    align-items: center;
  }
  .person_tp {
    height: 100%;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.person_icon {
  text {
    font-size: 40rpx;
  }
}
.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}
.scroll_rig_inner {
  padding: 20rpx 0;
  display: flex;
  width: 100%;
}
.current-item-img-outer-img {
  border-radius: 12rpx;
}
.current-item-img {
  position: relative;
  image {
    width: 100rpx;
    height: 100rpx;
  }
  .current-item-position {
    width: 32rpx;
    height: 32rpx;
    font-size: 28rpx;
    color: #ffffff;
    background-color: red;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -10rpx;
    top: -10rpx;
  }
}

.right-list-item-outer {
  background-color: #ffffff;
  flex: 1;
  padding: 20rpx;
}
.right-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  width: 100%;
  padding-left: 30rpx;
  border-bottom: 1rpx solid #cccccc;
  .cuIcon-right {
    font-size: 34rpx;
  }
  .center {
    width: 32rpx;
    height: 32rpx;
    background-color: red;
    align-items: center;
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 26rpx;
    border-radius: 100%;
  }
}
.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}
page {
  background-color: #f2f2f2;
}

.detail {
  display: flex;
  align-items: center;
  .detail-img {
    width: 100rpx;
    height: 100rpx;
    margin-right: 70rpx;
  }
  font-size: 34rpx;
  color: #333333;
}

.service {
  padding: 20rpx;
  display: flex;
  .left {
    flex: 1;
    margin-right: 20rpx;
    text-align: center;
  }
  .right {
    flex: 3;
  }
}
.goods {
  display: flex;
}
.goods {
  .left {
    width: 200rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    padding: 0 20rpx;
    background-color: #f2f2f2;
    margin: 0 30rpx;
    border-radius: 15rpx;
  }
  .right {
    width: 100rpx;
    height: 30rpx;
    border-radius: 15rpx;
    line-height: 30rpx;
    padding: 0 20rpx;
    text-align: center;
    background-color: #f2f2f2;
    margin-right: 12rpx;
  }
}
.assist {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
    text-align: left;
  }
}
.trun-position {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
    text-align: left;
  }
}
.dengji {
  font-size: 34rpx;
  margin-bottom: 12rpx;
}
.notes_outer {
  display: flex;
  align-items: center;
  .left {
    margin-right: 30rpx;
  }
  .notes {
    border: 2rpx solid #aaaaaa;
    height: 70rpx;
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    input {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10rpx;
      line-height: 70rpx;
    }
  }
}

.det_topsss {
  font-size: 34rpx;
  .detail-content {
    margin-top: 30rpx;
  }
  display: flex;
  .detail-inner {
    flex: 1;
  }
  .detail-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .detail-img {
      width: 70rpx;
      height: 70rpx;
    }
  }
  .detail-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1rpx solid #aaaaaa;
  }
  .detail-img {
    width: 60rpx;
    height: 60rpx;
  }
}
.textarea {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  textarea {
    border: 1rpx solid #cccccc;
    border-radius: 5rpx;
    padding: 20rpx;
  }
}
.success {
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  .success-left {
    margin-right: 30rpx;
    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
}
.person_img image {
  width: 100rpx;
  height: 100rpx;
}
.scroll_rig {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 20rpx;
  height: 160rpx;
  width: 100%;
  .person_img {
    image {
      width: 120rpx;
      height: 120rpx;
    }
  }
  .person_rig {
    margin-left: 20rpx;
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #dddddd;
  }
  .person_bt {
    display: flex;
    align-items: center;
  }
  .person_tp {
    height: 100%;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.person_icon {
  text {
    font-size: 40rpx;
  }
}
.person_icon {
  text {
    font-size: 40rpx;
  }
}
.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}
.scroll_rig_inner {
  padding: 20rpx 0;
  display: flex;
}
.scroll_inner {
  width: 200rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
